<!--
 * @Author: chen jiao
 * @Date: 2021-07-06 09:39:44
 * @LastEditTime: 2021-10-09 15:49:34
 * @LastEditors: Please set LastEditors
 * @Description: 组织语音审核
 * @FilePath: \ebc-admin\src\views\member\MemberAudit.vue
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <span slot="companyType" slot-scope="scope">
        {{
          scope.value.companyType === '0' ? '企业' :
          scope.value.companyType === '1' ? '政府事业单位' :
          scope.value.companyType === '2' ? '个体工商户' : '其他组织'
        }}
      </span>
      <span
        slot="auditStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.auditStatus === '2' ? '#67C23A' :
          scope.value.auditStatus === '1' ? '#909399' : '#F56C6C'
        }`"
      >
        {{
          scope.value.auditStatus === '3' ? '已拒绝' :
          scope.value.auditStatus === '1' ? '待审核' : '已同意'
        }}
      </span>
      <span
        slot="authStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.authStatus === '2' ? '#909399' :
          scope.value.authStatus === '1' ? '#67C23A' : '#F56C6C'
        }`"
      >
        {{
          scope.value.authStatus === '3' ? '认证失败' :
          scope.value.authStatus === '2' ? '审核中' :
          scope.value.authStatus === '1' ? '已认证' :
          scope.value.authStatus === '0' ? '未认证' : ''
        }}

      </span>
      <template slot="operate" slot-scope="scope">
        <el-button v-if="scope.value.auditStatus === '1'"  type="text" size="small" @click="companyDetail(scope.value)">审核</el-button>
        <el-button type="text" size="small" @click="auditBox(scope.value)" >审核记录</el-button>
      </template>
    </tab-list>
    <!-- 组织信息审核框 -->
    <el-dialog
      title="组织信息审核"
      :close-on-click-modal="false"
      :visible.sync="authShow2"
      width="40%"
      @closed="close"
    >
      <!-- 组织祥情项 -->
      <text-list :text-list="textList1" :detail-info="detailInfo2">
        <!-- 语音介绍 -->
        <template slot="audio">
          <div class="audio-box" v-if="voiceType== '2' "> 
            <span>语音介绍： </span>
            <audio class="box" id="audio" controls>
              <source :src="voiceUrl"  type="audio/ogg"> 
            </audio>
            <span @click="getAudio()" class="result-box"><i  :class="voiceAutoAudit ? 'el-icon-success':'el-icon-error'"></i></span>
          </div>
        </template>
      </text-list>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditInformation">同 意</el-button>
        <el-button @click="refuseBtn">拒 绝</el-button>
      </span>
    </el-dialog>
    <!-- 组织审核拒绝弹窗 -->
    <el-dialog
      v-if="authShow"
      title="组织信息审核"
      :visible.sync="authShow"
      width="30%"
      :close-on-click-modal="false"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="refuseAuth(false, form.reason)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="authShow = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 组织审核记录框 -->
      <el-dialog
        title="组织审核记录"
        :visible.sync="authShow3"
        width="50%"
        >
         <tab-list
          ref="orgAuditRecords"
          :searchs="searchs2"
          :list-hedar="listHedar2"
          :params="params2"
          @init-params="initParams2"
          :api-function="apiFunction2"
          >
            <span slot="auditStatus" slot-scope="scope">
              {{
                scope.value.auditStatus === '1' ? '审核中' :
                scope.value.auditStatus === '2' ? '已同意' : '已拒绝'
              }}
            </span>
          </tab-list>
          <span slot="footer" class="dialog-footer">
            <el-button @click="authShow3 = false">关 闭</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editForm from '@/components/admin/edit-form.vue'
import textList from '@/components/admin/text-list.vue'
// 公共方法
import { asyncApiFun, openMessageBox } from '@/utils/utils'
// 接口
import { companyVideo,companyAuth ,authDetail2 ,videoAuth,authLog} from '@/api/organize.js'
// 页面配置
import { listHedar, searchs, editList, rules, textList1, playerOptions ,searchs2,listHedar2} from './config/examine.config.js'
export default {
  components: {
    tabList,
    editForm,
    textList
  },
  data() {
    return {
      playerOptions,       //视频地址     
      voiceUrl:'' ,       //语音地址
      authShow: false,   //组织信息审核框
      authShow2: false,  //组织审核拒绝框
      authShow3:false,  //组织审核记录框
      apiFunction2:authLog,    //审核记录接口
      searchs,
      listHedar2,
      searchs2,
      editList,
      rules,
      form: {},
      params: {},  
      params2: {}, //审核记录初始参数 
      listHedar,
      apiFunction: companyVideo,
      authId: '',  
      textList1,
      detailInfo2: {},
      voiceUrl2:require("../../assets/media/tea.mp3"),
      voiceAutoAudit:false ,   //音频自动审核标识
      voiceType:'0'
    }
  },
  methods: {
    // 关闭审核框关闭时关闭语音
    close() {
       document.getElementById('audio')?.pause();
    },
    // 组织信息审核框
    async companyDetail({companyId}) {
      const [res] = await asyncApiFun(authDetail2 , companyId)
      if (res) {
        this.detailInfo2 = res.data
        this.voiceUrl = res.data.voiceUrl ? res.data.voiceUrl : ''
        this.voiceAutoAudit = res.data.voiceAutoAudit 
        this.voiceType = res.data.voiceType
        this.playerOptions.sources[0].src = res.data.companyVideo
        this.authShow2 = true
        // 修改当前组织ID
        this.authId = companyId
      }
    },
    // 同意审核通过
    async auditInformation(){ 
      const _params = {
        id: this.authId,
        operation: true
       }
      const [res] = await asyncApiFun(videoAuth, _params)
      if (res) this.$refs.list.getList()
      this.authShow2 = false
    },
    // 点击拒绝按钮
    refuseBtn(){
      this.authShow = true
      this.authShow2 = false
    },

    // 拒绝审核通过
    async refuseAuth(operation, reason) {
      const params = {
        operation,
        id: this.authId
      }
      if (reason) params.reason = reason
      const [res] = await asyncApiFun(videoAuth, params)
      if (res) {
        this.$message.success(`${operation ? '已通过审核' : '已拒绝审核'}`)
        this.authShow = false
        this.authShow2 = false
        this.$refs.list.getList()
      }
    },
  // 审核记录框
    async auditBox({ companyId }){
      this.authShow3 = true
      this.params2 = {
        companyId
      }
      this.$refs.orgAuditRecords?.getList()
      
    },



// 初始化参数
    initParams(param) {
      this.params = param
    },
// 审核记录集框初始化参数
    initParams2(param) {
      const {  companyId } = this.params2
      this.params2 = {  companyId,...param }
    }  
  }

}
</script>

<style lang="scss" scoped>
.video-player {
  display: inline-block;
  width:350px;
  vertical-align: middle;
}
.result-box{
  color: #1890ff;
}
</style>
